<template>
  <div class="kill_special">
    <div class="kill_special_items">
      <div class="kill_special_item" v-for="(item,index) in topActi" :key="index" @click="partiActi(item.activity_id)">
        <div class="kill_special_item_left">
          <div class="kill_special_item_left_text">{{item.product_rate}}%</div>
          <span>近一年增长率</span>
        </div>
        <div class="kill_special_item_right">
          <div class="kill_special_item_right_text">{{item.activity_name}}</div>
          <div class="kill_special_item_right_rate">
            <van-progress :percentage="item.t" stroke-width="10"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {activityList} from '@/api/activity'
export default {
  data(){
    return {
      topActi:[],
    }
  },
  methods:{
    getTopActi(){
      activityList().then(res=> {
        
        if(res.data.running_activity==null) return
        let len = res.data.running_activity.length;
        if(len<=3){
          for(let i =0;i<len;i++){
            if(res.data.running_activity[i]){
              let ob = {};
              ob = res.data.running_activity[i];
              let product_now_number = ((res.data.running_activity[i].product_total - res.data.running_activity[i].product_now_number) / res.data.running_activity[i].product_total)*100;
              let t = parseInt(product_now_number);
              ob.t = t;
              this.topActi.push(ob); 
            }
          }
        }else {
          for(let i =0;i<3;i++){
            if(res.data.running_activity[i]){
              let ob = {};
              ob = res.data.running_activity[i];
              let product_now_number = ((res.data.running_activity[i].product_total - res.data.running_activity[i].product_now_number) / res.data.running_activity[i].product_total)*100;
              let t = parseInt(product_now_number);
              ob.t = t;
              this.topActi.push(ob); 
            }
          }
        }
        
      })
    },
    partiActi(id){
      this.$router.push(`/activityDetail?q=${id}`)
    }
  },
  created(){
    this.getTopActi()
  },

}
</script>

<style lang="less">
.kill_special{
  position: relative;
  margin: 10px  auto;
  margin-top:60px;
  width: 90%;
  height: 235px;
  border-radius: 15px;
  background-color: rgba(229, 229, 229, 100);
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.4);
  // border: 1px solid red;
  background: url('../../../assets/img/activity/activity.png');
  background-size:100%;
  background-repeat: no-repeat;
  .kill_special_items{
    position: absolute;
    top: 60px;
    left: 15px;
    // margin:  0 auto;
    width: 90%;
    height: 160px;
    .kill_special_item{
      display: flex;
      justify-content: space-around;
      // align-items: center;
      width: 100%;
      height: 50px;
      // border: 1px solid red;
      // line-height: 50px;
      margin-bottom: 8px;
      // border-bottom: 1px solid rgb(207, 207, 207);
      .kill_special_item_left{
        display: flex;
        flex-direction: column;
        width: 30%;
        height: 100%;
        .kill_special_item_left_text{
          display: flex;
          flex-direction: column;
          color: rgba(224, 19, 36, 100);
          font-size: 18px;
          text-align: left;
          font-family: PingFangSC-regular;
        }
        span {
          // padding-top: 10px;
          margin-top: 5px;
          color: rgba(162, 163, 164, 100);
          font-size: 12px;
          text-align: left;
          font-family: PingFangSC-extraLight;
        }
      }
      .kill_special_item_right {
        width: 60%;
        height:100%;
        .kill_special_item_right_text{
          color: rgba(16, 16, 16, 100);
          font-size: 16px;
          text-align: center;
          font-family: PingFangSC-regular;
           overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
        }
        .kill_special_item_right_rate{
          margin-top: 10px;
        }
      }
    }
  }
}
</style>